<template>
  <Calendar v-model="value" hide-type style="padding: 0 20px 20px 20px;" @on-today="onSwitchToToday"
    @on-cell-contextmenu="onCellContextMenu">
    <template #month="{ data }">
      <div>
        <Badge status="success" text="国庆节" v-if="data.day === '2023-10-01'" />
      </div>
    </template>
  </Calendar>
</template>
<script>
import DayJs from 'dayjs'

export default {
  data() {
    return {
      value: DayJs().format('YYYY-MM-DD')
    }
  },
  methods: {
    onSwitchToToday() {
      this.value = DayJs().format('YYYY-MM-DD')
    },
    onCellContextMenu() {
      console.log(111)
    }
  }
}
</script>
<style lang="less">
.dashboard-workplace-apps {
  &-item {
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border-radius: 3px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    position: relative;

    &:after {
      content: '';
      display: block;
      position: absolute;
      border-radius: 3px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, .1);
      z-index: 0;
    }

    &-main {
      position: relative;
      z-index: 1;
    }
  }

  &-name,
  &-desc {
    color: #fff;
    font-weight: bold;
    padding: 4px 0 0 8px;
    font-size: 16px;
    margin-right: 45px;
  }

  &-desc {
    font-weight: normal;
    font-size: 12px;
  }

  &-extra {
    position: absolute;
    top: 6px;
    right: 6px;
    color: #f8f8f9;

    i {
      margin-left: 4px;
      font-size: 16px;
    }

    i.dashboard-workplace-apps-extra-star {
      color: #ff9900;
    }

    i:not(.dashboard-workplace-apps-extra-star) {
      display: none;
    }
  }

  &-item:hover &-extra i {
    display: inline-block;
  }
}
</style>
